import { connect } from 'http2';
import React,{useState,useEffect} from 'react'
import useStore from '../context/useStore'
import {useObserver} from 'mobx-react-lite'
import {useHistory} from 'react-router-dom'
import './Search.scss'
const Search:React.FC=()=>{
    let {mine}=useStore()
    let [va,setVa]=useState<string>('');
    let history=useHistory()

    let [arr,setArr]=useState<string[]>([])

    //热搜
    useEffect(()=>{
        mine.getHotList()
    },[])

    //关键词提示
    useEffect(()=>{
        mine.getSearchTips(va)
    },[va])

    //历史搜索
    useEffect(()=>{
        mine.getHistory()
    },[])

    //搜索结果
    useEffect(()=>{
        mine.getSearchResult(va)
    },[va])

    //点击搜嗦
    function Sea(){
        history.push('/detaile')
        let arr=JSON.parse(localStorage.getItem('search_history'))||[]
        console.log(arr)
        arr.push(va)
        localStorage.setItem('search_history',JSON.stringify(arr))
    }

      //跳转详情
      function goDetaile(e:React.MouseEvent){   
        if(e.target!==e.currentTarget){
            let ele=e.target as HTMLElement
            if(ele.tagName!=='LI'){
                ele=ele.parentElement
            }
            let id=ele.dataset.id
            history.push('/detaile?id='+id)
        }
    }

    

    return useObserver(()=> <div className='header'>
    <header>
    <div onClick={()=>history.push('/index/classify')}>
        {'<'}
    </div>
    <div className='s_'>
        搜索
    </div>
    </header>
    <div className='con'>
    <div className="search">
        <input type="text" placeholder='请输入关键字' value={va} onChange={e=>setVa(e.target.value)}/>
        <div onClick={Sea} className='see'>搜索</div>
    </div>
    {/* 排名搜索结果 */}
    <div onClick={goDetaile} >
        {
            mine.searchRankList.map((item,index)=>{
                return <li key={item.id} data-id={item.id}>
                    <img src={item.image} alt=""/>
                    <span>{item.name}</span>
                </li>
            })
        }
    </div>

 

    {/* 关键词提示 */}
    <div>
        {
            mine.searchTipList.map((item)=>{
                return <p key={item}>{item}</p>
            })
        }
    </div>
    {/* 历史搜索 */}
    <div className='history'>
        <p>历史搜索</p>
        {
         mine.historyList.map((item,index)=>{
                return <span key={item}> {index+1}、{item}</span>
            })
        }
    </div>
    {/* 热门推荐 */}
    <div className='host'>
        <p>热门搜索</p>
        <div className='hostItem'>
            {
                mine.hostList.map((item,index)=>{
                    return <span key={item}> {index+1}、{item}</span>
                })
            }
        </div>
    </div>
    </div>

</div>)
}
export default Search